<template>
  <div class="home">
    <el-container>
      <!-- 导航栏 -->
      <el-aside width="200px">
        <el-menu
        ref="menu"
        @select="keep"
        router
        width=100%
      :default-active='activepath'
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"> 
      <el-menu-item index="studio">工作室</el-menu-item>
      <el-menu-item index="studio_members">工作室成员</el-menu-item>
      <el-menu-item index="notice">公告</el-menu-item>
      <el-menu-item index="sign_up">报名</el-menu-item>
      <el-menu-item index="personal">个人信息</el-menu-item>
    </el-menu>
      </el-aside>
      <el-container>
        <!-- 信息栏 -->
        <el-header>
          <!-- 用户名 -->
          <div class="user">
            
            <el-button type="danger" class="logout" @click="logout">登出</el-button>
          </div>
        </el-header>
        <!-- 变换栏 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>

export default {
    data(){
      return{
        //导航栏
        activepath:'studio',
        //用户名
        username:'',
      }
      
    },
    methods:{
      //导航栏的动态保存
      keep(){
        sessionStorage.setItem('navkeep',this.$refs.menu.activeIndex);
      },
      //获得关于我的信息
      getpersonal(){
            let num = sessionStorage.getItem('num');
            this.$axios.post('/guest/getuser',{num:num}).then((res)=>{
                this.username = res.data.result.username;
                sessionStorage.setItem('username',this.username);
            })
      },
       //登出
        logout(){
            sessionStorage.setItem('token',null);
            this.$message.success('退出登陆成功');
            this.$router.push('/login');
        }
    },
    //生命周期函数
    created(){
      if(sessionStorage.getItem('navkeep')){
        this.activepath=sessionStorage.getItem('navkeep');
      }
      this.getpersonal();
    }
}
</script>
<style scoped>

  .el-header{
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    border-radius: 3px;
    margin: 5px;
    margin-top: 0;
  }
  
  .el-aside {
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 200px;
    border-radius: 0 3px 3px 0;
    overflow: hidden;
    height: 100vh;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    border-radius: 3px;
    margin: 0 5px;
    height: 90.4vh;
  }
  .el-menu{
    width: 100%;
  }
  /* 用户 */
  .logout{
    float: right;
    margin: 10px 20px;
  }
  .name{
    line-height: 160%;
    float:right;
    margin: 20px 20px;
  }
</style>
